<template>
  <div class="boxWrap">
    <div class="boxHeader">
      <div class="title">
        <h1>{{pageData.baseDto.newsCenterBackTitle}}</h1>
        <h2>{{pageData.baseDto.newsCenterTitle}}</h2>
      </div>

      <div class="tabNav">
        <div
          class="item"
          v-for="(item, index) in pageData?.baseDto?.newsCategory?.split('，')"
          :class="{ 'active' : currentTab == index + 1 }"
          @click="tabClick(index + 1, item)">{{item}}</div>
      </div>

    </div>


    <div class="newList">

      <div class="item" v-for="(item, index) in pageData.newsContentDtoList.slice(0, 2)" @click="showDetail(item)">
        <div class="img">
          <img :src="item.backUrl">
        </div>
        <div class="text">
          <div class="title lineBreak1">{{item.title}}</div>
          <div class="desc lineBreak4">{{item.digest}}</div>
          <div class="bottom">
            <div>{{item.newsDate}}</div>
            <div>→</div>
          </div>
        </div>
      </div>

      <div class="item" v-for="(item, index) in pageData.newsContentDtoList.slice(2)" @click="showDetail(item)">
        <div class="time">
          <div class="day">{{item.newsDate.split('-')[2]}}</div>
          <div class="year">{{item.newsDate.split('-')[0]}}-{{item.newsDate.split('-')[1]}}</div>
        </div>
        <div class="text">
          <div class="title lineBreak1">{{item.title}}</div>
          <div class="desc1 lineBreak2">{{item.digest}}</div>
        </div>
      </div>
    </div>

    <div class="showMore" @click="routerLink('/news', {tab: currentTab})">{{pageData.baseDto.newCenterButton}}</div>
  </div>
</template>

<script setup>
  import {ref} from 'vue'

  const currentTab = ref('1')
  import {apiGetNewsInfo, apiGetNewsList} from '@/api/index.js'
  import {useRouter, useRoute} from 'vue-router'

  const router = useRouter()
  const route = useRoute()
  import { UTILS_Tool } from '@/utils/index.js'
  const { routerLink } = UTILS_Tool()

  const typeList = ref([])
  const pageParams = ref({
    "category": "",
    "pageNum": 1,
    "pageSize": 6
  })

  const props = defineProps({
    pageData: {
      type: Object,
      default: () => {
      },
    }
  })


  const tabClick = (tab, type) => {
    currentTab.value = tab
    pageParams.value.category = type
    getList()
  }


  const getList = () => {
    apiGetNewsList(pageParams.value).then((res) => {
      props.pageData.newsContentDtoList = res.data
    })
  }


  const showDetail = (item) => {
    routerLink('/detail', {id: item.id, })
  }
</script>

<style scoped lang="scss">
  @media screen and (max-width: 1079px) {
    .boxWrap {
      width: 100%;
      margin-top: 10px;

      .boxHeader {
        .title {
          height: 40px;
          h1 {
           display: none;
          }
          h2 {
            font-size: 16px;
            line-height: 40px; font-weight: 600;
            color: #1A1A25;
          }
        }
        .tabNav {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          .item {
            height: 30px; padding: 0 10px;
            border: 1px solid #e8e8e8;
            text-align: center;
            font-size: 12px;
            line-height: 30px;
            color: #69696F;
            &.active {
              background-color: #1027EF;
              border: 0;
              color: #fff;
            }
          }
        }
      }

      .newList {
        .item {
          border: 1px solid #e8e8e8;
          padding: 10px;
          display: flex;
          margin-top: 10px;
          .img {
            width: 82px;
            img {
              width: 100%; height: 82px;
              display: block;
            }
          }
          .time {
            border-right: 1px solid #e8e8e8;
            text-align: center;
            padding-right: 10px;
            .day {
              font-size: 30px;
              font-weight: bold;
              line-height: 50px;
            }
            .year {
              color: #69696F;
              font-size: 14px;
              line-height: 20px;
            }
          }

          .text {
            flex: 1;
            padding-left: 10px;
            .title {
              font-size: 14px;
              font-weight: 600;
            }
            .desc {
              font-size: 12px;
              color: #69696F;
              padding-top: 5px;
              height: 41px;
              line-height: 18px;
            }
            .desc1 {
              font-size: 12px;
              color: #69696F;
              padding-top: 10px;
              line-height: 18px;
            }
            .bottom {
              display: flex;
              justify-content: space-between;
              padding-top: 5px; font-size: 12px;
              color: #69696F;
            }
          }
        }
      }

      .showMore {
        text-align: center;
        font-size: 14px;
        color: #1A1A25; padding-top: 15px;
      }
    }
  }

  @media screen and (min-width: 1080px) {
    .boxWrap {
      width: 100%;
      margin-top: 4vw;

      .boxHeader {
        display: flex;
        width: 100%;
        justify-content: space-between;
        .title {
          height: 6vw;
          width: 30vw;
          position: relative;
          h1 {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 3vw;
            color: #f6f6f6;
            font-weight: normal;
            z-index: -1;
            line-height: 4vw;
          }
          h2 {
            font-size: 1.8vw;
            line-height: 6vw;
            color: #1A1A25;
          }
        }
        .tabNav {
          display: flex;
          justify-content: flex-end;
          gap: 1vw;
          padding-top: 2vw;
          .item {
            height: 2.2vw; padding: 0 1.2vw;
            border: 1px solid #e8e8e8;
            text-align: center;
            font-size: 0.8vw;
            line-height: 2.2vw;
            box-sizing: content-box;
            color: #69696F;
            cursor: pointer;
            &.active {
              background-color: #1027EF;
              border: 0;
              color: #fff;
            }
          }
        }
      }

      .newList {
        display: flex;
        flex-wrap: wrap;
        .item {
          width: calc(50% - 0.5vw); cursor: pointer;
          border: 1px solid #e8e8e8;
          padding: 1.5vw;
          display: flex;
          margin-bottom: 1.5vw;
          &:nth-child(2n) {
            margin-left: 0.5vw;
          }
          &:nth-child(2n+1) {
            margin-right: 0.5vw;
          }
          .img {
            width: 10.2vw;
            height: 10.2vw;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .time {
            border-right: 1px solid #e8e8e8;
            text-align: center;
            padding-right: 1.5vw;
            .day {
              font-size: 3vw;
              font-weight: bold;
              line-height: 4vw;
            }
            .year {
              color: #69696F;
              font-size: 0.8vw;
              line-height: 1vw;
            }
          }

          .text {
            flex: 1;
            padding-left: 1.5vw;
            .title {
              font-size: 1vw;
              font-weight: 600; line-height: 1.6vw;
            }
            .desc {
              font-size: 0.8vw;
              color: #69696F;
              padding-top: 0.8vw;
              height: 5.8vw;
              line-height: 1.3vw;
            }
            .desc1 {
              font-size: 0.8vw;
              color: #69696F;
              padding-top: 0.8vw;
              line-height: 1.3vw;
            }
            .bottom {
              display: flex;
              justify-content: space-between;

              color: #69696F; line-height: 1vw; padding-top: 1.5vw;
            }
          }
        }
      }

      .showMore {
        text-align: center;
        font-size: 0.8vw;
        color: #1A1A25;
        cursor: pointer;
      }
    }
  }




  .lineBreak1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lineBreak2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lineBreak4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
